<!-- 我的拼团 -->
<template>
	<view class="page_box">
		<view class="head_box" style="background-color: #B4D701;">
			<cu-custom :isBack="!isTabbar" :bgColor="bgColor"><block slot="content">我的团队</block></cu-custom>
		</view>
		<view class="content_box">
			<view class="head padding-lg flex align-center justify-between">
				<view class=" flex align-center">
					<image src="" mode="" style="width: 98rpx; height: 98rpx;" class="radius bg-blue"></image>
					<view class="flex flex-direction margin-left justify-between">
						<text class="text-lg text-bold">多多分享赚取佣金</text>
						<view class="flex text-grey">
							<text>我的上级</text>
							<text class="">小李子</text>
						</view>
					</view>
				</view>
				<view class="invite flex align-center justify-center">
					<text>邀请</text>
					<view class="cuIcon-right margin-left"></view>
				</view>
			</view>
			<view class="team response padding-top padding-lr flex justify-between">
				<view class="team-l padding-sm flex flex-direction">
					<text class="text-sm text-grey">所在团队</text>
					<view class="response flex justify-center align-center flex-direction" style="height: 100%;">
						<text class="text-bold">成员人数</text>
						<text class="text-xl text-bold text-olive">5人</text>
					</view>
				</view>
				<view class="team-r padding-sm flex flex-direction">
					<text class="text-sm text-grey">管理团队</text>
					<view class="response flex justify-around align-center " style="height: 100%;">
						<view class="flex flex-direction align-center ">
							<text class="text-bold">成员人数</text>
							<text class="text-xl text-bold text-olive">5人</text>
						</view>
						<view class="flex-direction flex align-center">
							<text class="text-bold">佣金</text>
							<text class="text-xl text-bold text-olive">9999</text>
						</view>
					</view>
				</view>
			</view>
			<u-sticky>
				<view class="navbar  flex align-center justify-center text-xl text-bold text-olive ">
					<text class="" @click="click(1)" :class="e == 1 ? 'style' : ''">所在团队</text>
					<text class="margin-left" @click="click(2)" :class="e == 2 ? 'style' : ''">管理团队</text>
				</view>
			</u-sticky>
			<view class="info padding" v-if="e == 1">
				<text class="text-gray">团队详情</text>
				<view v-for="(item, index) in 20" :key="index" class="flex-direction">
					<view class="list padding-tb-sm flex align-center solid-bottom ">
						<image src="" mode="" style="width: 98rpx;height: 98rpx;" class="round bg-brown"></image>
						<view class=" flex flex-direction justify-between   margin-left" style="height: 100%;">
							<text>彭酱酱</text>
							<text class="text-gray">2021.03.26 12:25</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info padding" v-if="e == 2">
				<text class="text-gray">团队详情</text>
				<view v-for="(item, index) in 20" :key="index" class="flex-direction">
					<view class="list padding-tb-sm flex align-center solid-bottom justify-between">
						<view class=" flex">
							<image src="" mode="" style="width: 98rpx;height: 98rpx;" class="round bg-brown"></image>

							<view class="flex flex-direction justify-center  margin-left">
								<text>彭酱酱</text>
								<text class="text-gray">2021.03.26 12:25</text>
							</view>
						</view>
						<view class="commission flex align-center justify-around">
							<text>佣金</text>
							<text>45</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shActivityCard from '../children/sh-activity-card.vue';
export default {
	components: {
		shActivityCard,
	},
	data() {
		return {
			bgColor: '#B4D701',
			e: 1,

			isLoading: true,
			isTriggered: false, //下拉刷新状态，是否被触发。
			loadStatus: 'loadmore', //loadmore:加载前的状态，loading:加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			currentPage: 1,
			emptyData: {
				img: this.$IMG_URL + '/imgs/empty/empty_groupon.png',
				tip: '暂无此类拼团商品，更多拼团好货等着你噢~',
				path: '/pages/index/index',
				pathText: '去首页逛逛',
			},
			showShare: false,
			stateId: 'all',
			grouponStatus: {
				finish: this.$IMG_URL + '/imgs/group_state_succeed.png',
				'finish-fictitious': this.$IMG_URL + '/imgs/group_state_succeed.png',
				invalid: this.$IMG_URL + '/imgs/group_state_failed.png',
			},
			myGrouponList: [], //我的拼团列表。
			shareGoodsInfo: {}, //分享海报信息。
		};
	},
	computed: {},
	onLoad() {
		this.getMyGroupon();
	},
	onPullDownRefresh() {
		this.myGrouponList = [];
		this.getMyGroupon();
	},
	methods: {
		click(e) {
			this.e = e;
		},

		onNav(id) {
			this.stateId = id;
			this.myGrouponList = [];
			this.currentPage = 1;
			this.$u.debounce(this.getMyGroupon);
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		onInvite(data) {
			this.showShare = true;
			this.shareGoodsInfo = data;
		},
		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getMyGroupon();
			}
		},
		// 我的拼团
		getMyGroupon() {
			let that = this;
			that.isLoading = true;
			that.loadStatus = 'loading';
			that.$api('goods.myGroupon', {
				type: that.stateId,
				page: that.currentPage,
			}).then(res => {
				if (res.code === 1) {
					that.isLoading = false;
					uni.stopPullDownRefresh();
					that.myGrouponList = [...that.myGrouponList, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = 'loadmore';
					} else {
						that.loadStatus = 'nomore';
					}
				}
			});
		},
	},
};
</script>

<style lang="scss">
page {
	text {
		font-family: PingFang SC;
	}
}
.order-nav {
	background: #fff;
	height: 80rpx;

	.nav-item {
		flex: 1;

		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 76rpx;
		}

		.nav-line {
			width: 120rpx;
			height: 4rpx;
			background: #fff;
		}

		.line-active {
			background: rgba(230, 184, 115, 1);
		}
	}
}

// 拼团卡片
.head {
	width: 100vw;
	height: 203rpx;
	background: #b4d701;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	// border-radius: 50%;
	.invite {
		width: 162rpx;
		height: 68rpx;
		background: #ffffff;
		border-radius: 34rpx;
	}
}
.team {
	.team-l {
		width: 267rpx;
		height: 187rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(153, 153, 153, 0.2);
		border-radius: 10rpx;
	}
	.team-r {
		width: 406rpx;
		height: 187rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(153, 153, 153, 0.2);
		border-radius: 10rpx;
	}
}
.info {
	width: 690rpx;
	// height: 710rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(153, 153, 153, 0.2);
	border-radius: 20rpx;
	margin: 0 auto;
	// margin-top: 25rpx;.
	.commission {
		width: 132rpx;
		height: 56rpx;
		background: #b4d701;
		border-radius: 28rpx;

		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}
.navbar {
	height: 100rpx;
	background-color: #f5f5f5;
}
.style {
	border-bottom: 10rpx solid #b4d701;
}
</style>
